<template>
    <el-main>
      <el-form ref="queryForm" :model="queryForm" label-width="80px">
        <el-row>
          <el-col :span="4"><div class="grid-content bg-purple">
            <el-form-item label="渠道名称">
              <el-input v-model="queryForm.tradeQudao"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">
            <el-form-item label="交易结果">
              <el-select v-model="queryForm.tradeResult" placeholder="请选择交易结果">
                <el-option label="处理中" value="1"></el-option>
                <el-option label="成功" value="2"></el-option>
                <el-option label="失败" value="3"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><div class="grid-content bg-purple">
            <el-form-item label="对账批次">
              <el-input v-model="queryForm.batchNo"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple-light">
            <el-form-item label="交易金额">
              <el-input v-model="queryForm.amount"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><div class="grid-content bg-purple">
            <el-form-item label="是否差错">
              <el-select v-model="queryForm.hasDiff" placeholder="请选择是否差错">
                <el-option label="否" value="0"></el-option>
                <el-option label="是" value="1"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <span class="demonstration">交易日期：</span>
            <el-date-picker
              v-model="queryForm.tradeDateZfStart"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>~
            <el-date-picker
              v-model="queryForm.tradeDateZfEnd"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><div class="grid-content bg-purple">
            <el-form-item label="处理结果">
              <el-select v-model="queryForm.processState" placeholder="请选择处理结果">
                <el-option label="未处理" value="1"></el-option>
                <el-option label="要结算" value="2"></el-option>
                <el-option label="不结算" value="3"></el-option>
                <el-option label="已处理" value="4"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-form-item label="支付方式">
              <el-select v-model="queryForm.payWay" placeholder="请选择支付方式">
                <el-option label="微信扫码" value="1"></el-option>
                <el-option label="支付宝扫码" value="2"></el-option>
                <el-option label="微信公众号" value="3"></el-option>
                <el-option label="认证支付" value="4"></el-option>
                <el-option label="代付到银行卡" value="5"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="batchNo"
          label="对账批次"
          width="140">
        </el-table-column>
        <el-table-column
          prop="payOrderNo"
          label="交易流水号"
          width="140">
        </el-table-column>
        <el-table-column
          prop="qudaoOrderNo"
          label="渠道订单号"
          width="140">
        </el-table-column>
        <el-table-column
          prop="tradeQudao"
          label="渠道名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="tradeResult"
          label="交易结果"
          width="100">
          <template slot-scope="scope">
          <span v-if="scope.row.tradeResult==1">
            处理中
          </span>
            <span v-else-if="scope.row.tradeResult==2">
            成功
          </span>
            <span v-else-if="scope.row.tradeResult==3">
            失败
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="交易金额"
          width="100">
        </el-table-column>
        <el-table-column
          prop="tradeDateZf"
          label="交易日期"
          width="140">
        </el-table-column>
        <el-table-column
          prop="commissionFee"
          label="手续费"
          width="100">
        </el-table-column>
          <el-table-column
            prop="payWay"
            label="支付方式"
            width="120">
            <template slot-scope="scope">
          <span v-if="scope.row.payWay==1">
            微信扫码
          </span>
              <span v-else-if="scope.row.payWay==2">
            支付宝扫码
          </span>
              <span v-else-if="scope.row.payWay==3">
            微信公众号
          </span>
              <span v-else-if="scope.row.payWay==4">
            认证支付
          </span>
              <span v-else-if="scope.row.payWay==5">
            代付到银行卡
          </span>
            </template>
        </el-table-column>
        <el-table-column
           prop="tradeAccount"
           label="交易账号"
           width="100">
        </el-table-column>
        <el-table-column
           prop="tradeAccountType"
           label="交易账户类型"
           width="100">
          <template slot-scope="scope">
          <span v-if="scope.row.tradeAccountType==1">
            微信
          </span>
            <span v-else-if="scope.row.tradeAccountType==2">
            支付宝
          </span>
            <span v-else-if="scope.row.tradeAccountType==3">
            银行卡
          </span>
            <span v-else-if="scope.row.tradeAccountType==4">
            拉卡拉
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkEndDate"
          label="对账完成时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="hasDiff"
          label="是否差错"
          width="100">
          <template slot-scope="scope">
          <span v-if="scope.row.hasDiff==0">
            否
          </span>
            <span v-else-if="scope.row.hasDiff==1">
            是
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="processState"
          label="处理结果"
          width="100">
          <template slot-scope="scope">
          <span v-if="scope.row.processState==1">
            未处理
          </span>
            <span v-else-if="scope.row.processState==2">
            要结算
          </span>
            <span v-if="scope.row.processState==3">
            不结算
          </span>
            <span v-else-if="scope.row.processState==4">
            已处理
          </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getList"
      />
    </el-main>
</template>

<script>
  import {batchList} from "@/api/system/batchDetail";
    export default {
        name: "index",
        data(){
          return{
            queryForm:{
              pageNum:0,
              pageSize:10,
              tradeQudao:undefined,
              tradeResult:undefined,
              batchNo:undefined,
              amount:undefined,
              hasDiff:undefined,
              tradeDateZfStart:undefined,
              tradeDateZfEnd:undefined,
              processState:undefined,
              payWay:undefined
            },
            tableData:{},
            total:0
          }
        },
      methods:{
        /** 对账明细查询 */
        getList() {
          this.loading = true;
          batchList(this.queryForm).then(response => {
            this.tableData = response.data.list;
            this.total = response.data.total;
          });
        },
        /** 重置按钮 */
        resetQuery(){
          this.queryForm={
            pageNum:1,
            pageSize:8,
            billDayStart:undefined,
            billDayEnd:undefined
          }
          this.handleQuery();
        },
        /** 条件查询 */
        handleQuery() {
          this.queryForm.pageNum = 1;
          this.getList();
        }
      },
      created() {
          this.getList();
      }
    }
</script>

<style scoped>

</style>
